import React from 'react'
import { equals } from 'lodash/fp'
import Decorator from './decorator/index.jsx'

/*const Elm = ({classes, css, onIpunt, content, onInput, selected, isEditable, isPreview, path}) => {
    return (
        <div
            className={classes.concat('elm').join(' ') + (selected ? ' layer-item-select' : '')} 
            style={css} 
            dangerouslySetInnerHTML={{__html: content}}
            contentEditable={isEditable && classes.includes('editable') && classes.includes('text')}
            onInput={onInput}
            data-path={path}
        />
    )
}*/

class Elm extends React.Component {
    // shouldComponentUpdate (nextProps) {
    //     return nextProps.focused === this.props.path 
    //         || this.props.focused === this.props.path 
    //         || nextProps.selected !== this.props.selected 
    //         || nextProps.content !== this.props.content
    //         || nextProps.path !== this.props.path 
    // }

    render() {
        let { classes, css, onIpunt, content, onInput, selected, isEditable, path, focusElm, focused, draging, editing, edited, isEditing, resizing } = this.props
        const boxAttr = ['width', 'height', 'left', 'top', 'transform', 'opacity', 'zIndex']

        let boxStyle = {}
            , elmStyle = {}
            , isText = classes.includes('text')
            , isFocused = isText && (focused === path)

        for (let attr in css) {
            if (boxAttr.includes(attr)) {
                boxStyle[attr] = css[attr]
            } else {
                elmStyle[attr] = css[attr]
            }
        }

        if ('zIndex' in css) boxStyle.zIndex = parseInt(css.zIndex) + 2

        if ('zIndex' in css && classes.includes('card-bg')) boxStyle.zIndex = 1

        isEditing = isFocused && isEditing

        if (isFocused) boxStyle.zIndex = 99999

        if (isEditing) elmStyle.display = 'none'
        return (
            <div
                className="elm-box"
                style={boxStyle}
                onClick={() => focusElm && !isFocused  && isText && focusElm(path)}
                onDoubleClick={isText && !isEditing ? editing : null}
            >
                <div
                    className={classes.concat('elm').join(' ') + (selected && !isText ? ' layer-item-select' : '')}
                    style={elmStyle}
                    dangerouslySetInnerHTML={{ __html: content }}
                    onInput={onInput}
                    data-path={path}
                />
                <Decorator isFocused={isFocused} draging={draging} resizing={resizing} edited={edited} />
            </div>
        ) 
    }
}

const Page = ({ elements, path, onInput, isEditable, previewPath, onClick, selectedPath, focusElm, focused, draging, editing, edited, isEditing, resizing }) => {
    return (
        <div className={`page`} onClick={onClick}>
            {elements.map((t, i) =>
                t
                ? <Elm {...t} key={i}
                    path={`${path}.${i}`}
                    selected={selectedPath && selectedPath.includes(`${path}.${i}`)}
                    onInput={isEditing ? ({ target: { innerHTML } }) => onInput(innerHTML, [path, i]) : null}
                    isEditable={isEditable}
                    focusElm={focusElm}
                    focused={focused}
                    draging={draging}
                    editing={editing}
                    edited={edited}
                    isEditing={isEditing}
                    resizing={resizing}
                />
                : null
            )}
        </div>
    )
}

export default Page